<template>
  <div id="role">
    <v-header title="我的清单"  :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="problemCon">
      <div class="problem_main">
        <div class="problem_header">
            <div class="condition">
              <el-row>
                <el-col :span="1">
                  <span>类型:</span>
                </el-col>
                <el-col :span="22">
                  <el-checkbox-group v-model="BugsType" @change="checkTypes">
                    <el-checkbox v-for="type in typeList" :label="type.val" :key="type.val">{{type.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>
            <div class="condition">
              <el-row>
                <el-col :span="1">
                  <span>版本:</span>
                </el-col>
                <el-col :span="22">
                  <el-checkbox-group v-model="versionType" @change="checkTypes">
                    <el-checkbox v-for="version in versionList" :label="version.ver_num" :key="version.ver_num">{{version.ver_num}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>
            <div class="condition">
              <el-row>
                <el-col :span="1">
                  <span>状态:</span>
                </el-col>
                <el-col :span="22">
                  <el-checkbox-group v-model="bugStatus" @change="checkTypes">
                    <el-checkbox v-for="status in bugStatusList" :label="status.val" :key="status.val">{{status.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>
            <div class="condition">
              <el-row>
                <el-col :span="1">
                  <span>等级:</span>
                </el-col>
                <el-col :span="22">
                  <el-checkbox-group v-model="exp_levels" @change="checkTypes">
                    <el-checkbox v-for="status in level_lists" :label="status.val" :key="status.val">{{status.label}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>
          <div class="condition dates">
            <el-row>
              <el-col :span="1">
                <span style="margin-top: 6px;">日期:</span>
              </el-col>
              <el-col :span="22">
                <el-date-picker
                  size="small"
                  v-model="dates"
                  type="daterange"
                  :picker-options="pickerOptions1"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-row>
          </div>
            <div class="header_btm">
              <div class="btm_right">
              </div>
            </div>
          </div>
        <div class="problem_list">
            <div class="problem-box" v-if="bugslList.length > 0">
              <div class="item" v-for="bug in bugslList" :key="bug.exp_ID">
                <div class="cont">
                  <div class="tit">
                    <h4>{{ bug.exp_title }}</h4>
                    <span class="s-flag" v-if="bug.exp_status === '0'">未解决</span>
                    <span class="s-flag finished" v-if="bug.exp_status === '1'">已解决</span>
                  </div>
                  <div class="text">
                    <span v-if="bug.exp_type === '0'" class="badge badge1">异常</span>
                    <span v-if="bug.exp_type === '1'" class="badge badge2">崩溃</span>
                    <span v-if="bug.exp_type === '2'" class="badge badge3">卡顿</span>
                    <p><span @click="go({id: 0, app_ver: bug.app_ver, exp_info: bug.exp_info, bug_hap_cnt: bug.bug_hap_cnt, bug_dev_cnt: bug.bug_dev_cnt, bug_user_cnt: bug.bug_user_cnt, dev_id: bug.dev_id, exp_title: bug.exp_title, exp_desc: bug.exp_desc})">{{ bug.exp_desc }}</span></p>
                    <div class="grade_style">等级：{{changeLevelVal(bug.exp_level)}}</div>
                    <!-- <div class="grade_style">等级：{{level_lists.find(item => bug.exp_level === item.val).label}}</div> -->
                    <el-button v-if="bug.exp_status === '0'" type="primary" size="small" @click.stop="repairBug(bug.exp_title, bug.exp_desc, bug.app_ver)">修复</el-button>
                    <el-button v-if="bug.exp_status === '1'" type="primary" size="small" @click.stop="repairBug(bug.exp_title, bug.exp_desc, bug.app_ver)" :disabled="true">已修复</el-button>
                  </div>
                  <ul class="details-box">
                    <li>发生次数: {{ bug.bug_hap_cnt }}</li>
                    <li>影响机型数: {{ bug.bug_dev_cnt }}</li>
                    <li>影响用户数: {{ bug.bug_user_cnt }}</li>
                    <li>版本: {{ bug.app_ver }}</li>
                    <li>发生日期：{{ bug.exp_hap_time }}</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="no_record" v-else>
                <span>暂无数据哦</span>
            </div>
            <div class="block pagination-box">
              <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevClick"
                @next-click="nextClick"
                :pageSize="pageSize"
                layout="total, prev, pager, next"
                :total="Number(total)">
              </el-pagination>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import canvasLine from './comm/canvasLine/canvasLine'
import { VHeader } from '../../components'
import { nextPage, getDateTime } from '../../assets/js/index'
import ajax from '../../api/ajax/ajax'
import api from '../../api/url'
import 'echarts/lib/component/tooltip'
import { mixinParams } from '../../assets/js/mixin1'
import { mapMutations } from 'vuex'
export default {
  components: {
    VHeader,
    canvasLine
  },
  mixins: [mixinParams],
  data () {
    return {
      selectList: ['按提交时间', '按更新时间', '按优先级', '按崩溃次数', '按崩溃影响机型数', '按崩溃影响用户数'],
      selecttime: '',
      BugsType: [],
      versionType: [],
      bugStatus: [],
      exp_levels: [],
      bugStatusList: [{name: '已解决', val: '1'}, {name: '未解决', val: '0'}],
      level_lists: [{val: '0', label: '未分级'}, {val: '1', label: '紧急'}, {val: '2', label: '高'}, {val: '3', label: '普通'}, {val: '4', label: '低'}],
      typeList: [{name: '卡顿', val: '2'}, {name: '崩溃', val: '1'}, {name: '异常', val: '0'}],
      versionList: ['1.0', '2.0', '3.0'],
      bugslList: [],
      total: '', // 当前查询的总条数
      nowPage: '', // 当前页
      pageSize: 5,
      dates: [],
      from_date: '',
      to_date: '',
      pickerOptions1: { // 推送禁止定时时间
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      }
    }
  },
  watch: {
    appFlag: {
      handler (val) {
        if (val) {
          this.addFlag = true
          nextPage('/home/bugIndex')
          this.pd_updatePath('/home/bugIndex')
        }
      }
    },
    dates (arr) {
      if (arr !== null) {
        this.from_date = getDateTime(arr[0], 'day') + ' 00:00:00'
        this.to_date = getDateTime(arr[1], 'day') + ' 23:59:59'
        this.queryAllBugs()
      } else {
        this.from_date = ''
        this.to_date = ''
        this.queryAllBugs()
      }
    }
  },
  methods: {
    ...mapMutations([
      'updateBugListOpt'
    ]),
    // 等级转换
    changeLevelVal (value) {
      // value = value === undefined ? '0' : value
      if (value) {
        let a = this.level_lists.find(item => {
          return item.val === value
        })
        return a.label
      }
    },
    repairBug (title, desc, v) {
      let params = {
        exp_title: title,
        exp_desc: desc,
        app_ver: v
      }
      ajax.post(api.REPAIR_BUG, params)
        .then(res => {
          this.queryAllBugs()
        })
    },
    queryVersionList () {
      ajax.post(api.SELECT_APP_VERSION_LIST)
        .then(res => {
          this.versionList = res.data.list
        })
    },
    go (params) {
      let bugListOpt = params
      this.updateBugListOpt(bugListOpt)
      nextPage('/home/problemInfo')
    },
    handleCommand (command) {},
    handleCurrentChange (val) {
      this.nowPage = val
      let params = {
        pageNo: this.nowPage,
        pageSize: this.pageSize,
        keyword: '',
        exp_types: this.BugsType,
        app_vers: this.versionType,
        user_id: 'me',
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    prevClick () {
      this.nowPage--
      let params = {
        pageNo: this.nowPage,
        pageSize: this.pageSize,
        keyword: '',
        exp_types: this.BugsType,
        app_vers: this.versionType,
        user_fla: 'me',
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    nextClick () {
      this.nowPage++
      let params = {
        pageNo: this.nowPage,
        pageSize: this.pageSize,
        keyword: '',
        exp_types: this.BugsType,
        app_vers: this.versionType,
        user_id: 'me',
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    checkTypes () {
      let params = {
        'pageNo': '1',
        'pageSize': this.pageSize,
        'keyword': '',
        'exp_levels': this.exp_levels,
        'exp_types': this.BugsType,
        'app_vers': this.versionType,
        user_id: 'me',
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    queryAllBugs () {
      let params = {
        pageNo: '1',
        keyword: '',
        exp_levels: this.exp_levels,
        exp_types: this.BugsType,
        app_vers: this.versionType,
        pageSize: this.pageSize,
        user_id: 'me',
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    }
  },
  mounted () {
    this.queryAllBugs()
    this.queryVersionList()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #role
    .demonstration
      font-size 14px
      color #8492a6
      line-height 32px
    .right
      float right
    .left
      float left
    height 100%
    .problemCon
      overflow: auto
      height calc(100% - 56px)
      margin 10px 0 0 10px
      padding-right 10px
      .mymenu
        .el-menu-item
          height 30px
          line-height 30px
      .left_menu
        background-color #fff
        width 300px
        float left
        margin-right 19px
        .left_title
          padding 10px 25px
      .problem_main
        text-align left
        background-color #fff
        width 100%
        .problem_header
          border-bottom 1px solid rgb(240, 240, 240)
          .header_btm
            padding 10px 25px
          .mymenu
            width 200px
          width 100%
          .header_top, .condition
            padding 10px 25px
          .dates .el-col-1
            padding-top 5px
          .header_top:after, .btm_right:after
            content ''
            display table
            clear both
          .search_box
            float right
            .problem_search
              float left
              margin-right 10px
        /* .problem_list
          text-align left
          .list:after
            content ''
            display table
            clear both
          .list:hover
            background-color #ecf9ff
          .list
            padding 10px 25px
            border-bottom 1px solid rgb(240, 240, 240)
            .list_icon
              img
                width 80px
                height 80px
              margin-right 10px
            .list_container
              .errtype
                color #2196f3
              .list_footer
                display flex
                justify-content space-between
                .echartline
                  .echarts
                    width 160px
                    height 50px !important
                span
                  margin-right 25px */
        .problem-box
            .item
              padding 15px
              overflow hidden
              border-bottom 1px solid #f0f0f0
              position relative
              // cursor pointer
              // &:hover
              //   background-color #ecf9ff
              /*.pic
                float left
                min-width 100px
                min-height 100px
                background red
                position relative
                img
                  position absolute
                  width 100px
                  height 100px
                  left 0
                  top 0*/
              .cont
                min-height 100px
                bacground green
                .tit
                  position relative
                  h4
                    height 24px
                    line-height 24px
                    font-size 14px
                    font-weight normal
                  .s-flag
                    position absolute
                    right 0
                    top 0
                    line-height 24px
                    font-size 12px
                    color #333
                    &.finished
                      color #999
                .text
                  padding 10px 120px 10px 0
                  position relative
                  .badge
                    float left
                    position relative
                    top 4px
                    margin-right 5px
                    font-size 10px
                    height 16px
                    line-height 16px
                    padding 0 5px
                    border-radius 3px
                    color #fff
                    background red
                    &.badge1
                      background #f3983e
                    &.badge2
                      background #ed4134
                    &.badge3
                      background #673ab7
                  p
                    white-space nowrap
                    text-overflow ellipsis
                    color #016DFB
                    overflow hidden
                    line-height 24px
                    max-width 1300px
                    & span
                      &:hover
                        cursor pointer
                        text-decoration underline
                  .grade_style
                    position absolute
                    right 170px
                    top 50%
                    height 30px
                    margin-top -10px
                    color #999
                    font-size 13px
                    width 110px
                  .el-button
                    position absolute
                    right 0
                    top 50%
                    height 30px
                    margin-top -15px
                    padding 0 15px
                .details-box
                  margin-top 5px
                  overflow hidden
                  li
                    float left
                    width 20%
                    color #666
                    font-size 13px
                    line-height 24px
    .pagination-box
      .el-pagination
        padding 10px 15px 10px 0
        line-height 30px
        text-align right
  .no_record
    padding 20px
    span
        display block
        line-height 48px
        height 48px
        font-size 14px
        color #999
        text-align center
        position relative
        &:before
            content '\e658'
            display inline-block
            vertical-align top
            height 48px
            font-size 48px
            margin-right 5px
            color #999
            font-family 'iconfont'
</style>
<style>
.mymenu>.el-submenu>.el-submenu__title {
  height: 40px;
  line-height: 20px;
}
.problem_search>.el-input>.el-input__prefix>.el-input__icon{
  line-height: 30px;
}
</style>
